<template>
  <div id="article-page">
    <v-card flat>
      <v-card-text>
        <p class="display-1 text-xs-center my-3">{{ article.title}}</p>
        <p class="text-xs-center grey--text">
          创建于{{ article.created_at }}&nbsp;/&nbsp;
          <v-icon small>far fa-eye</v-icon>&nbsp;123&nbsp;/&nbsp;
          <v-icon small>far fa-comments</v-icon>
          &nbsp;123&nbsp;/&nbsp;
          更新于{{ article.updated_at }}&nbsp;
        </p>
        <div class="hr-line-dashed my-3"></div>
        <div class="content markdown-body text-wrap" v-html="article.content"></div>
        <div class="hr-line-dashed my-3"></div>
        <v-layout column>
          <v-flex text-xs-center>
            <v-btn dark color="rgb(221, 75, 57)">
              <v-icon>fas fa-thumbs-up</v-icon>&nbsp;
              <span class="subheading font-weight-medium">123</span>&nbsp;&nbsp;
            </v-btn>
          </v-flex>
          <v-flex class="mt-3">
            <p class="grey--text">
              <strong>版权声明：</strong>本博客所有文章除特别声明外，均采用
              <a
                href="https://creativecommons.org/licenses/by-nc/4.0/"
                rel="external nofollow"
                target="_blank"
              >CC BY-NC 4.0</a> 许可协议。转载请注明出处！
            </p>
          </v-flex>
        </v-layout>
      </v-card-text>
    </v-card>
    <v-card class="mt-3" flat>
      <v-card-text>
        <p class="title text-xs-center my-3">
          <v-icon>fas fa-comments</v-icon>&nbsp;讨论评论
        </p>
        <div class="hr-line-dashed my-3"></div>
        <v-layout>
          <v-flex>
            <div id="gitalk-container"></div>
          </v-flex>
        </v-layout>
      </v-card-text>
    </v-card>
  </div>
</template>
<script>
import request from '@/utils/request'
import 'gitalk/dist/gitalk.css'
import Gitalk from 'gitalk'
import gitalk_config from '@/utils/gitalk'
export default {
  name: 'article',
  data: () => ({
    article: [],
    gitalk: new Gitalk(gitalk_config)
  }),
  methods: {
    fetchData: function(id) {
      request.get('/posts').then(res => {
        this.article = res.data.posts[id - 1]
        console.log(res.data.posts[id - 1])
      })
    }
  },
  created() {
    let id = this.$route.params.id
    // console.log(id)
    // this.fetchData(id)
    this.article.title = 'JWT 详解'
    this.article.created_at = '三年前'
    this.article.updated_at = '昨天'
    this.article.content = `
<blockquote>
<p>Json web token (JWT), 是为了在网络应用环境间传递声明而执行的一种基于JSON的开放标准（(RFC 7519).该token被设计为紧凑且安全的，特别适用于分布式站点的单点登录（SSO）场景。JWT的声明一般被用来在身份提供者和服务提供者间传递被认证的用户身份信息，以便于从资源服务器获取资源，也可以增加一些额外的其它业务逻辑所必须的声明信息，该token也可直接被用于认证，也可被加密。 JSON Web Token（JWT）是一个非常轻巧的规范。这个规范允许我们使用JWT在用户和服务器之间传递安全可靠的信息。</p>
</blockquote>
<p>要更好的使用 JWT ，那么不得不了解 Token ，翻译过来就是令牌，，字面意思就代表它的意思了，它就是一个令牌，通俗的讲就是暗号。它表现形式是一串字符，通常用于鉴别是否有无权限（鉴权凭证）</p>
<p><strong>例如：一个典型用户在登陆网站例子，传统流程是这样的</strong></p>
<ul>
<li>用户输入账号密码，点击登陆</li>
<li>服务端验证通过，为用户设置 session，返回给客户端，由客户端存储在本地</li>
<li>在之后每一次访问网站，客户端都会携带该 cookie（session_id 存储是借助 cookie 机制的） 访问网站</li>
<li>服务端会对此 cookie 进行验证，通过就返回数据</li>
<li>若验证不通过，就说明当前是处于未登录状态
<ul>
<li>session 已过期</li>
<li>客户端清除了 cookie</li>
<li>等等一些因素</li>
</ul></li>
</ul>
<p><strong>这样做的缺点有几点：</strong></p>
<ul>
<li>为用户设置 Session 会大量占用服务器资源</li>
<li>CSRF 跨站请求伪造，简单说，用户登陆了一个网站，在本地存储了 cookie，这时候访问另外一个网站（恶意网站），这个网站呢，此时可以伪装成用户，发起恶意请求到用户已授权的网站，这样达到了攻击的目的（可窃取一切可能的信息，钱财…）</li>
<li>CORF 跨域资源共享，数据在不同移动设备不能共享，而且涉及到跨域的问题，使用 ajax 实现起来也困难</li>
<li>…</li>
</ul>
<p><strong>若使用 Token 呢？同样例子</strong></p>
<ul>
<li>用户登陆</li>
<li>服务端验证通过，生成一串字符（Token），发送给客户端保存在本地</li>
<li>后续任何访问操作都携带 token 访问服务端</li>
</ul>
<p><strong>看着流程没多大变化，那么 Token 优势在哪里呢？</strong></p>
<ul>
<li>生成的字符串不占用服务器资源</li>
<li>避免 CSRF 攻击</li>
<li>数据共享，在移动端是不支持 Cookie，而 token 可以存在网站任何地方</li>
</ul>
<p>通过上面的例子可以得知，token 就是一个凭证，通过这个凭证能做些拥有权限范围的操作，而没有凭证，那么将是无效的操作。</p>
<p>token 既然是一串字符，那么实现它的方式就多种多样。不过，token 也有一套规范，在 <a href="https://tools.ietf.org/html/rfc7519">RFC 7519</a> 为 token 定义了授权规范。</p>
<h2>JWT的组成</h2>
<p>一个JWT实际上就是一个字符串，它由三部分组成，<strong>头部</strong>、<strong>载荷</strong>与<strong>签名</strong>。</p>
<p><img src="https://i.loli.net/2019/01/01/5c2aff223d4ac.png" alt="jwt_anatomy.png" /></p>
<h3>头部（Header）</h3>
<p>JWT还需要一个头部，头部用于描述关于该JWT的最基本的信息，例如其类型以及签名所用的算法等。这也可以被表示成一个JSON对象。</p>
<pre><code class="language-json">{
  "typ": "JWT",
  "alg": "HS256"
}</code></pre>
<p>在这里，我们说明了这是一个JWT，并且我们所用的签名算法（后面会提到）是HS256算法。</p>
<p>对它也要进行Base64编码，之后的字符串就成了JWT的Header（头部）。</p>
<pre><code>eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9</code></pre>
<h3>载荷（Payload）</h3>
<p>我们先将上面的添加好友的操作描述成一个JSON对象。其中添加了一些其他的信息，帮助今后收到这个JWT的服务器理解这个JWT。</p>
<p>载荷就是存放有效信息的地方。这个名字像是特指飞机上承载的货品，这些有效信息包含三个部分</p>
<ul>
<li>标准中注册的声明</li>
<li>公共的声明</li>
<li>私有的声明</li>
</ul>
<p>标准中注册的声明 (建议但不强制使用) ：</p>
<ul>
<li>iss: jwt签发者</li>
<li>sub: jwt所面向的用户</li>
<li>aud: 接收jwt的一方</li>
<li>exp: jwt的过期时间，这个过期时间必须要大于签发时间</li>
<li>nbf: 定义在什么时间之前，该jwt都是不可用的.</li>
<li>iat: jwt的签发时间</li>
<li>jti: jwt的唯一身份标识，主要用来作为一次性token,从而回避重放攻击。</li>
</ul>
<p>这些定义都可以在<a href="https://tools.ietf.org/html/draft-ietf-oauth-json-web-token-32">标准</a>中找到。</p>
<p><strong>公共的声明 ：</strong>
公共的声明可以添加任何的信息，一般添加用户的相关信息或其他业务需要的必要信息.但不建议添加敏感信息，因为该部分在客户端可解密.</p>
<p><strong>私有的声明 ：</strong>
私有声明是提供者和消费者所共同定义的声明，一般不建议存放敏感信息，因为base64是对称解密的，意味着该部分信息可以归类为明文信息。</p>
<p>定义一个payload:</p>
<pre><code class="language-json">{
  "sub": "1234567890",
  "name": "John Doe",
  "admin": true
}</code></pre>
<p>然后将其进行base64加密，得到 <code>JWT</code> 的第二部分。</p>
<p><code>eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiYWRtaW4iOnRydWV9</code></p>
<p>如果你使用Node.js，可以用Node.js的包base64url来得到这个字符串。</p>
<pre><code class="language-js">var base64url = require('base64url')
var header = {
    "from_user": "B",
    "target_user": "A"
}
console.log(base64url(JSON.stringify(header)))
// 输出：eyJpc3MiOiJKb2huIFd1IEpXVCIsImlhdCI6MTQ0MTU5MzUwMiwiZXhwIjoxNDQxNTk0NzIyLCJhdWQiOiJ3d3cuZXhhbXBsZS5jb20iLCJzdWIiOiJqcm9ja2V0QGV4YW1wbGUuY29tIiwiZnJvbV91c2VyIjoiQiIsInRhcmdldF91c2VyIjoiQSJ9</code></pre>
<blockquote>
<p>注意：Base64是一种编码，也就是说，它是可以被翻译回原来的样子来的。它并不是一种加密过程。</p>
</blockquote>
<h3>签名（Signature）</h3>
<p><code>JWT</code> 的第三部分是一个签证信息，这个签证信息由三部分组成：</p>
<ul>
<li>header (base64后的)</li>
<li>payload (base64后的)</li>
<li>secret</li>
</ul>
<p>这个部分需要 <code>base64</code> 加密后的 <code>header</code> 和base64加密后的 <code>payload</code> 使用 <code>.</code> 连接组成的字符串，然后通过header中声明的加密方式进行<code>加盐 secret</code>组合加密，然后就构成了jwt的第三部分。</p>
<pre><code class="language-js">// javascript
var encodedString = base64UrlEncode(header) + '.' + base64UrlEncode(payload);

var signature = HMACSHA256(encodedString, 'secret'); // TJVA95OrM7E2cBab30RMHrHDcEfxjoYZgeFONFh7HgQ</code></pre>
<p>将这三部分用 <code>.</code> 连接成一个完整的字符串,构成了最终的jwt:</p>
<pre><code>eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiYWRtaW4iOnRydWV9.TJVA95OrM7E2cBab30RMHrHDcEfxjoYZgeFONFh7HgQ</code></pre>
<blockquote>
<p>注意：secret是保存在服务器端的，jwt的签发生成也是在服务器端的，secret就是用来进行jwt的签发和jwt的验证，所以，它就是你服务端的私钥，在任何场景都不应该流露出去。一旦客户端得知这个secret, 那就意味着客户端是可以自我签发jwt了。</p>
</blockquote>
<h4>签名的目的</h4>
<p>最后一步签名的过程，实际上是对头部以及载荷内容进行签名。一般而言，加密算法对于不同的输入产生的输出总是不一样的。对于两个不同的输入，产生同样的输出的概率极其地小。所以，我们就把“不一样的输入产生不一样的输出”当做必然事件来看待吧。</p>
<p>所以，如果有人对头部以及载荷的内容解码之后进行修改，再进行编码的话，那么新的头部和载荷的签名和之前的签名就将是不一样的。而且，如果不知道服务器加密的时候用的密钥的话，得出来的签名也一定会是不一样的。</p>
<p>服务器应用在接受到JWT后，会首先对头部和载荷的内容用同一算法再次签名。那么服务器应用是怎么知道我们用的是哪一种算法呢？别忘了，我们在JWT的头部中已经用alg字段指明了我们的加密算法了。</p>
<p>如果服务器应用对头部和载荷再次以同样方法签名之后发现，自己计算出来的签名和接受到的签名不一样，那么就说明这个Token的内容被别人动过的，我们应该拒绝这个Token，返回一个HTTP 401 Unauthorized响应。</p>
<h4>信息会暴露？</h4>
<p><strong>是的。</strong></p>
<p>所以，在JWT中，不应该在载荷里面加入任何敏感的数据。在上面的例子中，我们传输的是用户的Username。这个值实际上不是什么敏感内容，一般情况下被知道也是安全的。</p>
<p>但是像密码这样的内容就不能被放在JWT中了。如果将用户的密码放在了JWT中，那么怀有恶意的第三方通过Base64解码就能很快地知道你的密码了。</p>
<h2>应用</h2>
<p>通常会在请求头部加上 Authorization，同时用 Bearer 标识</p>
<pre><code class="language-js">header{
    "Authorization" : 'Bearer ' + token
}</code></pre>
<p>除了上面的方法，还有其它的一些方法</p>
<p>GET 参数</p>
<p><code>https://huasio.com/?token=.................</code></p>
<p>POST 参数
……</p>
<p>服务端会验证token，如果验证通过就会返回相应的资源。整个流程就是这样的:</p>
<p><img src="https://i.loli.net/2019/01/01/5c2afcd2405bf.png" alt="JWT-AUTH.png" /></p>
<h2>总结</h2>
<h3>优点</h3>
<ul>
<li>因为json的通用性，所以JWT是可以进行跨语言支持的，像JAVA,JavaScript,NodeJS,PHP等很多语言都可以使用。</li>
<li>因为有了payload部分，所以JWT可以在自身存储一些其他业务逻辑所必要的非敏感信息。</li>
<li>便于传输，jwt的构成非常简单，字节占用很小，所以它是非常便于传输的。</li>
<li>它不需要在服务端保存会话信息, 所以它易于应用的扩展</li>
</ul>
<h3>安全相关</h3>
<ul>
<li>不应该在jwt的payload部分存放敏感信息，因为该部分是客户端可解密的部分。</li>
<li>保护好secret私钥，该私钥非常重要。</li>
<li>如果可以，请使用https协议</li>
</ul>
<h3>JWT的适用场景</h3>
<p>我们可以看到，JWT适合用于向Web应用传递一些非敏感信息。例如在上面提到的完成加好友的操作，还有诸如下订单的操作等等。</p>
<p>其实JWT还经常用于设计用户认证和授权系统，甚至实现Web应用的单点登录。在下一次的文章中，我将为大家系统地总结JWT在用户认证和授权上的应用。</p>
<hr />
<p>参考：</p>
<ul>
<li><a href="https://huasio.com/read/17/detailed-explanation-and-practice-of-jwt">JWT 详解及实践</a></li>
<li><a href="https://blog.leapoahead.com/2015/09/06/understanding-jwt/">JSON Web Token - 在Web应用间安全地传递信息</a></li>
<li><a href="https://www.cnblogs.com/lizm166/p/7844110.html">JWT（Json web token）认证详解</a></li>
</ul>`
  },
  mounted() {
    this.gitalk.render('gitalk-container')
  }
}
</script>

